<template>
  <el-dialog :title="title" :visible.sync="visible" custom-class="dot-modal">
    <div class="dot-con">
      <div v-if="this.model.mapUrl">
        <canvas id="pointApp" :width="mapWidth" :height="mapHeight"></canvas>
      </div>
      <div class="no-have" v-else>暂未上传楼层图片,请先上传</div>
    </div>
    <div slot="footer" style="text-align: right">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleOk('editFormRef')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import zrender from 'zrender'
// import { createBackground } from '@/utils/canvas'

export default {
  name: 'DotModal',
  data () {
    return {
      title: '设置点位',
      visible: false,
      zr: null,
      model: {},
      mapWidth: 960,
      mapHeight: 500,
      startPosition: {}, // dragStart时位置保存
      newDot: '',
      group: null,
      isClick: false
    }
  },
  // props: {
  //   checkDeptInfo: {
  //     type: Object,
  //     required: false,
  //     default: () => {}
  //   }
  // },
  methods: {
    // 新增
    add (row) {
      this.visible = true
      this.model = Object.assign({}, row)
      if (row.mapUrl) {
        this.drawMap(row)
      }
    },

    // 地图
    drawMap (row) {
      this.$nextTick(() => {
        const { roomX, roomY, spotName } = row
        this.zr = zrender.init(document.getElementById('pointApp'))
        this.group = new zrender.Group()
        this.zr.clear()
        this.zr.add(this.createBackground(row.mapUrl, this.mapWidth, this.mapHeight))
        if (roomX && roomY) {
          this.drawCircle(this.mapWidth * roomX, this.mapHeight * roomY, spotName)
        }
      })
    },
    // 绘图
    createBackground (url, width, height) {
      let backImg = new zrender.Image({
        zlevel: 0,
        style: {
          image: url,
          x: 0,
          y: 0,
          width: width,
          height: height
        }
      })
      backImg.on('click', e => {
        this.group.removeAll()
        this.drawCircle(e.offsetX, e.offsetY, this.model.spotName)
        this.newDot = `${(e.offsetX / this.mapWidth).toFixed(6)},${(e.offsetY / this.mapHeight).toFixed(6)}`
      })
      return backImg
    },
    // 绘制圆
    drawCircle (x, y, name) {
      let circle = new zrender.Circle({
        draggable: true,
        shape: {
          cx: x,
          cy: y,
          r: 16
        },
        style: {
          // fill: this.getColor(obj),
          fill: '#1890ff',
          text: name.split('')[0],
          fontSize: '12',
          textFill: '#ffffff'
        }
      })
      circle.on('dragstart', e => {
        this.startPosition = { x: e.offsetX, y: e.offsetY }
      })
      circle.on('dragend', e => {
        // this.isClick = e.offsetX === this.startPosition.x && e.offsetY === this.startPosition.y
        if (e.offsetX > this.mapWidth - 16 || e.offsetY > this.mapHeight - 16 || e.offsetX < 0 || e.offsetY < 0) {
          circle.animateTo(
            {
              shape: {
                cx: 0,
                cy: 0,
                r: 16
              },
              position: [this.startPosition.x, this.startPosition.y]
            },
            0,
            0
          )
          this.$message({
            message: '拖动请勿超出范围，图标已移动至原先点位',
            type: 'warning'
          })
        } else {
          this.newDot = `${(e.offsetX / this.mapWidth).toFixed(6)},${(e.offsetY / this.mapHeight).toFixed(6)}`
        }
      })
      circle.on('click', () => {})
      this.group.add(circle)
      this.zr.add(this.group)
    },

    // 提交表单
    handleOk () {
      this.$emit('dotModalOk', this.newDot)
      this.handleCancel()
    },

    // 关闭
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .dot-modal {
  width: 1000px !important;
  margin-top: 10vh !important;
}
.dot-con {
  box-sizing: border-box;
  border: 1px solid #e8ebee;
  height: 500px;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .no-have {
    width: 100%;
    text-align: center;
    padding-top: 130px;
  }
}
</style>
